<template>
	<div class="container">
		<div class="tableBox">
			<div class="tableItem">
				<div
					:class="changeNum === item.id ? 'changeItem item' : 'item'"
					v-for="item in childList"
					:key="item.id"
					@click="changeItem(item.id)"
				>
					<router-link
						:to="item.to"
						style="
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
						"
						>{{ item.text }}</router-link
					>
				</div>
			</div>
			<router-view></router-view>
		</div>
		<!-- 退出登入 -->
		<div class="outLogin">
      <van-button icon="scan" type="primary" @click="fullScreen" size="small" style="margin-right: 20px;" v-if="!fullscreen"
				>全屏</van-button
			>
      <van-button icon="revoke" type="primary" @click="exitFullscreen" size="small" style="margin-right: 20px;" v-else
				>退出</van-button
			>
			<van-button icon="friends-o" type="danger" @click="outLogin" size="small"
				>退出登入</van-button
			>
		</div>
	</div>
</template>

<script>
export default {
	name: "MyHome",
	data() {
		return {
      fullscreen: false,
			childList: [
				{ id: 0, text: "用户管理", to: "/home/user" },
				{ id: 1, text: "权限管理", to: "/home/authority" },
				{ id: 2, text: "商品管理", to: "/home/goods" },
				{ id: 3, text: "订单管理", to: "/home/order" },
				{ id: 4, text: "系统管理", to: "/home/system" },
			],
			changeNum: 0,
			obj: {
				name: "张三",
				age: 18,
			},
			test: "hi",
		};
	},
	watch: {
		obj: {
			handler() {
				console.log(this.obj);
			},
			deep: true,
		},
	},
  created() {
    this.fullscreen = this.checkFull()
  },
	methods: {
		// 修改对象的值
		updateObj() {
			this.obj.name = "李四";
		},
		changeItem(id) {
			this.changeNum = id;
		},
		// 退出登入
		outLogin() {
			// 删除保存的 token
			localStorage.removeItem("token");
			// 编程式导航
			this.$router.push("/login");
		},

		fullScreen() {
			//全屏
      this.fullscreen = true
			var full = document.querySelector(".container");
			this.launchIntoFullscreen(full);
		},
		//全屏封装
		launchIntoFullscreen(element) {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullscreen();
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen();
			}
		},
		//退出全屏封装
		exitFullscreen() {
      this.fullscreen = false
			if (document.exitFullscreen) {
				document.exitFullscreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.webkitExitFullscreen) {
				document.webkitExitFullscreen();
			}
		},
		checkFull() {
			//判断浏览器是否处于全屏状态 （需要考虑兼容问题）
			//火狐浏览器
			var isFull =
				document.mozFullScreen ||
				document.fullScreen ||
				//谷歌浏览器及Webkit内核浏览器
				document.webkitIsFullScreen ||
				document.webkitRequestFullScreen ||
				document.mozRequestFullScreen ||
				document.msFullscreenEnabled;
			if (isFull === undefined) {
				isFull = false;
			}
			return isFull;
		},
	},
};
</script>

<style scoped>
.container {
	position: relative;
	height: 100vh;
	width: 100%;
	padding: 20px;
  background-color: #fff;
}
.tableBox {
	display: flex;
	/* position: absolute; */
	/* top: 50%; */
	/* left: 50%; */
	/* transform: translate(-50%, -50%); */
	width: 100%;
	border: 1px solid #ccc;
	height: 100%;
}
.tableItem {
	/* flex: 0.3; */
	width: 200px;
	display: flex;
	flex-direction: column;
}
.item {
	/* flex: 1; */
	height: 50px;
	display: flex;
	align-items: center;
	padding-left: 20px;
}
.changeItem {
	position: relative;
	background-color: #f0eef0;
}
.changeItem::after {
	content: "";
	position: absolute;
	left: 0;
	border-left: 4px solid #4bb085;
	height: 100%;
	width: 0;
	top: 0;
}
.outLogin {
	position: absolute;
	top: 30px;
	right: 50px;
}
</style>
